/* cursor 鼠标形状
------------------------------- */
.cursor-default {
  cursor: default !important;
}

/* 帮助 */
.cursor-help {
  cursor: help !important;
}

/* 手指 */
.cursor-pointer {
  cursor: pointer !important;
}

/*  移动 */
.cursor-move {
  cursor: move !important;
}

/* 宽高 100%
------------------------------- */
.w100 {
  width: 100% !important;
}

.h100 {
  height: 100% !important;
}

.vh100 {
  height: 100vh !important;
}

.max100vh {
  max-height: 100vh !important;
}

.min100vh {
  min-height: 100vh !important;
}

/* 字体大小全局样式
------------------------------- */
@for $i from 10 through 35 {
  .font#{$i} {
    font-size: #{$i}px !important;
  }
}

/* 外边距、内边距全局样式
------------------------------- */
@for $i from 1 through 35 {
  .mt#{$i} {
    margin-top: #{$i}px !important;
  }

  .mr#{$i} {
    margin-right: #{$i}px !important;
  }

  .mb#{$i} {
    margin-bottom: #{$i}px !important;
  }

  .ml#{$i} {
    margin-left: #{$i}px !important;
  }

  .pt#{$i} {
    padding-top: #{$i}px !important;
  }

  .pr#{$i} {
    padding-right: #{$i}px !important;
  }

  .pb#{$i} {
    padding-bottom: #{$i}px !important;
  }

  .pl#{$i} {
    padding-left: #{$i}px !important;
  }
}

/* 全部dialog进入动画
------------------------------- */
.dialog-fade-enter-active {
  display: inline-block;
  animation: zoom-in;
  animation-duration: 0.5s;
  background-color: rgb(0 0 0 / 0%);
}

@keyframes zoom-in {
  0% {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -12.5rem, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 0.75rem, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

/* 全部dialog离开动画
------------------------------- */
.dialog-fade-leave-active {
  display: inline-block;
  animation: zoom-out;
  animation-duration: 0.5s;
  background-color: rgb(0 0 0 / 0%);
}

@keyframes zoom-out {
  0% {
    opacity: 1;
  }

  60% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  100% {
    opacity: 0;
  }
}
